<template>
  <div class="step_container">
    <div class="procedure">
      <el-timeline>
        <el-timeline-item
          v-for="(approver, index) in flowableDataList"
          :key="index"
          :icon="
            renderAvatar(
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            )
          "
        >
          <div class="node-content">
            <p class="rank_time">
              <span>
                {{ approver.candidate }}
              </span>
              <span class="time">
                {{ approver.finishTime }}
              </span>
            </p>

            <p class="Leader_Name">
              <span>
                {{ approver.taskName }}
              </span>

              <span class="consent" v-if="approver.comment">
                ({{ approver.comment.type == 1 ? "同意" : "拒绝" }})
              </span>
            </p>
            <p class="audit_Opinion" v-if="approver.comment">
              {{ approver.comment.comment }}
            </p>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>

    <!-- 填写意见 -->
    <div class="input_box" v-if="flowableBtns && flowableBtns.length > 0">
      <p>填写意见</p>
      <!-- 审批意见输入框 -->
      <div class="container">
        <textarea
          placeholder="请输入内容"
          v-model="comment"
          class="custom-textarea"
        ></textarea>
      </div>
      <!-- 审批按钮 -->
      <div class="approval-actions">
        <div class="left-section">
          <el-button @click="handleClose">
            <el-icon>
              <BottomLeft />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </div>

        <div class="right-">
          <el-button
            v-for="item in flowableBtns"
            :key="item.id"
            :type="item.btnType"
            @click="handleSubmit(item)"
          >
            {{ getButtonName(item) }}
          </el-button>
        </div>
        <!-- {{ flowableBtns }} -->

        <!-- <slot
          name="actions"
          :comment="comment"
          :handleClose="handleClose"
          :handleSubmit="handleSubmit"
        >

          <div class="default-actions">
            <div class="left-actions">
              <el-button @click="handleClose">关闭</el-button>
            </div>
          </div>
        </slot> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { h } from "vue";

import { ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const comment = ref(""); // 双向绑定的文本内容
const props = defineProps({
  flowableDataList: {
    type: Array,
    default: () => [],
  },
  workFlow: {
    type: String,
    default: "",
  },
  requireComment: {
    type: Boolean,
    default: false,
  },
  flowableBtns: {
    type: Array,
    default: () => [],
  },
});
const getButtonName = (item) => {
  if (item.btnName === "通过审批") return "通过";
  if (item.btnName === "退回修改") return "驳回";
  return item.btnName; // 如果不符合条件，直接返回原始名称
};
const emit = defineEmits(["submit", "close"]);
// 处理提交
const handleSubmit = (type) => {
  console.log(type);
  if (props.requireComment && !comment.value.trim()) {
    alert("请填写审批意见");
    return;
  }
  emit("submit", {
    type, // pass/reject
    comment: comment.value.trim(),
  });
};
// 处理关闭
const handleClose = () => {
  comment.value = "";
  emit("close");
  emit("update:show", false);
};
// 处理头像渲染
const renderAvatar = (avatarUrl) => {
  return h("img", { src: avatarUrl, class: "custom-avatar" });
};
</script>

<style scoped>
.step_container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: Arial, sans-serif;
}
.custom-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.procedure {
  /* padding-top: 20px;
  overflow: auto;
  padding: 10px 0; */
  flex: 0.8;
  overflow-y: auto;
  padding: 10px;
  /* background-color: #f9f9f9; */
  border-radius: 5px;
}
.input_box {
  /* width: 100%;
  height: calc(100%);
  z-index: 1; */

  /* flex: 0 0 40%;
  min-height: 0;
  margin: 5px;
  padding: 10px;
  border-radius: 5px; */

  flex: 0 auto;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}
.container {
  width: 100%;
  height: 100px;
  background-color: #f0f0f0;
}

.custom-textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
  box-sizing: border-box;
}

.approval-process {
  width: 100%;
  position: relative;
  overflow: auto;
}

.line {
  position: absolute;
  left: 25px;
  width: 2px;
  height: 80%;
  z-index: 1;
}

.dashed-line {
  border: 1px dashed #ccc;
  background: none;
}

.solid-line {
  border: 1px solid #ccc;
  background-color: #ccc;
}

.approval-node,
.cc-node {
  display: flex;
  position: relative;
}

.node-avatar {
  margin-right: 10px;
  z-index: 99;
}

.node-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  z-index: 99;
}

.node-content {
  flex: 1;
  line-height: 15px;
}
.cc-names {
  display: flex;
  flex-wrap: wrap;
}

.cc-names span {
  margin-right: 10px;
  font-size: 10px;
  margin-left: 5px;
}

.cc-avatars {
  display: flex;
  margin-top: 10px;
}

.cc-avatars img {
  width: 30px;
  height: 30px;
  border-radius: 10%;
  margin-right: 6px;
}

.rank_time {
  display: flex;
  justify-content: space-between;
  color: var(--Primary4-950, #16191d);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
.time {
  color: #999;
}
.Leader_Name {
  display: flex;
  color: #999;
  font-size: 15px;
}

.consent {
  margin-left: 6px;
}

.audit_Opinion {
  width: 100%;
  background: #f9f9f9;
  height: 90px;
  font-size: 14px;
  color: #999;
}

.approval-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}
</style>
